﻿<!DOCTYPE html>
<html>
<head>
<title>CityBoard</title>
<script type="text/javascript" src="<?php echo $data['siteScriptsUrl']; ?>/jquery-latest.min.js"></script>
<style>
    html, body {margin:0;padding:0;}
    .header-bar {position:fixed;z-index:99;height:40px;background-color:#aaa;width:100%;opacity:0.7;}
    .main-bar, .header {width:1020px;margin:0 auto;}
    .header h1 {margin:0;}
    .map-box {background:url(<?php echo $data['siteImagesUrl']; ?>/home/map.png) no-repeat;width:847px;height:701px;position:relative;}
    
    .city {position:absolute;height:10px;width:10px;background:#0c0;}
    .city:hover {height:12px;width:12px;margin:-1px -1px;}
    .tianjin {left:645px;top:275px;}
    .beijing {left:633px;top:263px;}
    .shenzhen {left:620px;top:600px;}
    /* 更多城市 */
    
    .light-box {position:absolute;height:200px;width:300px;border:1px solid #aaa;background-color:#ccc;}
</style>
</head>
<body>
    <div class="header-bar">
        <div class="header">
            <h1>亲，欢迎来到CityBoard!</h1>
        </div>
    </div>
    <div class="main-bar">
        <div class="map-box">
            <a href="javascript:void(0)" class="city tianjin" title="天津"></a>
            <a href="javascript:void(0)" class="city beijing" title="北京"></a>
            <a href="javascript:void(0)" class="city shenzhen" title="深圳"></a>
        </div>
    </div>
    <div id="light_box" style="display:none;" class="light-box">
        
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
            initCity();
        });
        
        function initCity() {
            var lightBox = $("#light_box");
            var timer;
            lightBox.hover(
                function() {
                    clearTimeout(timer);
                    $(this)
                        .stop()
                        .fadeTo(1, 1);
                },
                function() {
                    var that = $(this);
                    timer = setTimeout(function() {
                        that.fadeOut();
                    }, 500);
                }
            );
            $(".city").click(function() {
                lightBox
                    .css({
                        left: $(this).offset().left,
                        top: $(this).offset().top
                    })
                    .show();
            });
        }
    </script>
</body>
</html>